<template>
  <div>
    <div class="input-container">
      <input type="text" v-model="param1" placeholder="输入pageNum">
      <input type="text" v-model="param2" placeholder="输入y">
      <button @click="submitParams">提交</button>
    </div>
    <div class="pdf-container">
      <!-- 左边的 PDF 查看器 -->
      <div class="left-pdf">
        <VPdfViewer :src="pdf1Src" @pagechange="handleLeftPageChange" @click="handleLeftPdfClick" ref="leftPdfViewer"
          locale="zh_CN" class="page-left" />
      </div>
      <!-- 右边的 PDF 查看器 -->
      <div class="right-pdf">
        <VPdfViewer :src="pdf2Src" ref="rightPdfViewer" locale="zh_CN" class="page-right" />
      </div>

    </div>

  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, onMounted } from 'vue';
import { VPdfViewer } from "@vue-pdf-viewer/viewer";
import { getRate } from '@/api/index.js';
// import {
//   getRate
// } from "@/api/index";
// 左边 PDF 的源地址
const pdf1Src = ref('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf');
// 右边 PDF 的源地址
const pdf2Src = ref('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf');

// 左边 PDF 查看器的引用
const leftPdfViewer = ref(null);
const leftPageControl = computed(() => leftPdfViewer.value?.pageControl)
// 右边 PDF 查看器的引用
const rightPdfViewer = ref(null);
const rightPageControl = computed(() => rightPdfViewer.value?.pageControl)

// 定义响应式数据
const param1 = ref('4');
const param2 = ref('60');
// 提交参数的函数
const submitParams = async () => {
  // 检查输入是否为空
  if (!param1.value || !param2.value) {
    alert('请输入两个参数');
    return;
  }
  const data = {
    "pageNum": Number(param1.value),
    "y": Number(param2.value)
  }
  // axios.post('http://60.204.137.132:8130/api/rightPos', data)
  //   .then(response => {
  //     console.log(response.data);
  //   })
  //   .catch(error => {
  //     console.error('Error:', error);
  //   });
  try {
    // 模拟接口请求，这里使用一个示例 URL
    console.log(getRate)

    const response = await getRate(data);
    console.log('接口返回数据:', response);
  } catch (error) {
    console.error('请求出错:', error);
  }
};

// 处理左边 PDF 页面切换事件
const handleLeftPageChange = (pageNumber) => {
  console.log('handleLeftPageChange')

  // 当左边 PDF 页面切换时，右边 PDF 也切换到相同页面
  if (rightPageControl.value) {
    rightPageControl.value.setPage(pageNumber);
  }
};

// 处理左边 PDF 点击事件
const handleLeftPdfClick = (event) => {
  console.log('click')
  console.dir(event)
  console.dir(event.target['aria-label'])


  // 获取点击位置的垂直坐标
  const y = event.clientY;

  // 假设左边 PDF 查看器的引用有获取当前页面的方法
  const currentPage = leftPageControl.value.currentPage;
  console.log(currentPage)

  // 右边 PDF 跳转到相同页面
  if (rightPageControl.value) {
    rightPageControl.value.goToPage(currentPage);
    // 右边 PDF 滚动到相同高度坐标
    console.log(y)
    const element = rightPdfViewer.value;
    console.log(element)
    // rightPdfViewer.value.scrollTo(0, y);
  }
};
</script>

<style scoped>
.pdf-container {
  display: flex;
  height: 100vh;
  flex-wrap: wrap;
}

.input-container {
  flex: 1;
  width: 300px;
  display: flex;
  flex-direction: column;
}

input {
  margin-bottom: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 8px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.left-pdf,
.right-pdf {
  flex: 1;
  height: 80vh;
}
</style>